<template>
  <div>
    <div style="height:80px">
  <el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="map.findid" placeholder="套餐编码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input v-model="map.findname" placeholder="套餐名称"></el-input>
  </el-form-item>
  <el-form-item>
      <el-select v-model="map.findsm" placeholder="适用人群">
          <el-option  value=""></el-option>
          <el-option label="老年人" value="老年人"></el-option>
          <el-option label="男女通用" value="男女通用"></el-option>
          <el-option label="职业人" value="职业人"></el-option>
          <el-option label="儿童" value="儿童"></el-option>
          <el-option label="青年人" value="青年人"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="selsetmealall()">查询</el-button>
  </el-form-item>
  <el-button type="warning" @click="clickAdd">添加</el-button>
</el-form>
</div>
  <div>
    <el-table :data="page.rows" border style="width: 100%">
      <el-table-column prop="besSmId" fixed="left" label="套餐编号" width="110" align="center"> </el-table-column>
      <el-table-column prop="besSmName" label="套餐名称" width="280" align="center"> </el-table-column>
      <el-table-column prop="besSmApply"  label="适用人群"  width="120" align="center"> </el-table-column>
      <el-table-column prop="besSmAge" label="适用年龄段" width="120" align="center"> </el-table-column>
      <el-table-column  prop="besSmPrice" label="套餐价格" width="110" align="center"></el-table-column>
      <el-table-column  prop="besTypeId" label="预约类型" width="130" align="center"> </el-table-column>
      <el-table-column prop="besSmState" label="套餐状态" width="128" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="270" align="center" prop="besSmId">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="watchDetails(scope.row)"><i class="el-icon-view"></i>查看详情</el-button>
          <el-button type="text" size="small" @click="clickUp(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
          <el-button type="text" size="small" @click="delSetmeal(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          <el-button type="text" size="small" @click="createPDF(scope.row)"><i class="el-icon-download"></i>生成模板</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="block">
    <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 9, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
      </el-pagination>
  </div>

  <!-- 新增套餐 -->
  <el-dialog title="新增套餐" :visible.sync="setmealadd" width="1200px" center >
    <el-row>
      <el-col :span="12"><div>
        <el-form :model="setmeal" :rules="rules" ref="setmeal" label-width="100px" class="demo-ruleForm" label-position="left" inline-message>
            <el-form-item label="套餐名称" prop="besSmName">
                <el-input v-model="setmeal.besSmName" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item  label="适用人群" prop="besSmApply">
                <el-select v-model="setmeal.besSmApply">
                    <el-option label="老年人" value="老年人"></el-option>
                    <el-option label="男女通用" value="男女通用"></el-option>
                    <el-option label="职业人" value="职业人"></el-option>
                    <el-option label="儿童" value="儿童"></el-option>
                    <el-option label="青年人" value="青年人"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用年龄段" prop="besSmAge">
              <el-col :span="11">
                  <el-input-number v-model="minage" controls-position="right" :min="0"></el-input-number>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                  <el-input-number v-model="maxage" controls-position="right" :min="minage" :max="120"></el-input-number>
              </el-col>
            </el-form-item>
            <el-form-item label="预约类型" prop="besTypeId">
              <el-select v-model="setmeal.besTypeId" placeholder="请选择预约类型" style="width: 250px">
              <el-option label="入职体检" value="1"></el-option>
              <el-option label="健康体检" value="2"></el-option>
              <el-option label="从业体检" value="3"></el-option>
              <el-option label="征兵体检" value="4"></el-option>
              <el-option label="学生体检" value="5"></el-option>
              <el-option label="职业病体检" value="6"></el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="套餐图片">
              <input type="file" id="besSmImage"  accept=".gif,.jpg,.jpeg,.png,.webp">
            </el-form-item>
            <el-form-item label="套餐描述" prop="besSmDesc">
              <el-input type="textarea" v-model="setmeal.besSmDesc" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="besSmItem">
              <el-input type="textarea" v-model="setmeal.besSmItem" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="套餐状态" prop="besSmState">
              <div style="margin-top: 20px">
                <el-radio v-model="setmeal.besSmState" label="0" border size="medium">启用</el-radio>
                <el-radio v-model="setmeal.besSmState" label="1" border size="medium">禁用</el-radio>
              </div>
            </el-form-item>
          </el-form>
        </div></el-col>
      <el-col :span="12">
        <div>
          <el-table ref="singleTable" :data="pojects" @selection-change="addpoject" max-height="470" style="width: 100%">
            <el-table-column type="selection"  width="50"></el-table-column>
            <el-table-column prop="besProName" label="项目名称" width="330"></el-table-column>
            <el-table-column  prop="besProPrice" label="项目价格" width="90"></el-table-column>
            <el-table-column prop="besProGender" label="适用性别"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="setmealadd=false">取 消</el-button>
      <el-button type="primary" @click="submitSetMeal('setmeal')">提 交</el-button>
    </div>
  </el-dialog>

  <!-- 修改套餐 -->
  <el-dialog title="修改套餐" :visible.sync="dialogUp" width="1200px" center >
    <el-row>
      <el-col :span="12"><div>
        <el-form :model="setmealUp" :rules="rules" ref="setmealUp" label-width="100px" class="demo-ruleForm" label-position="left" inline-message>
            <el-form-item label="套餐名称" prop="besSmName">
                <el-input v-model="setmealUp.besSmName" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item  label="适用人群" prop="besSmApply">
                <el-select v-model="setmealUp.besSmApply">
                    <el-option label="老年人" value="老年人"></el-option>
                    <el-option label="男女通用" value="男女通用"></el-option>
                    <el-option label="职业人" value="职业人"></el-option>
                    <el-option label="儿童" value="儿童"></el-option>
                    <el-option label="青年人" value="青年人"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用年龄段" prop="besSmAge">
              <el-col :span="11">
                  <el-input-number v-model="minage" controls-position="right" :min="0"></el-input-number>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                  <el-input-number v-model="maxage" controls-position="right" :min="minage" :max="120"></el-input-number>
              </el-col>
            </el-form-item>
            <el-form-item label="预约类型" prop="besTypeId">
              <el-select v-model="setmealUp.besTypeId" placeholder="请选择预约类型" style="width: 250px">
              <el-option label="入职体检" :value="1"></el-option>
              <el-option label="健康体检" :value="2"></el-option>
              <el-option label="从业体检" :value="3"></el-option>
              <el-option label="征兵体检" :value="4"></el-option>
              <el-option label="学生体检" :value="5"></el-option>
              <el-option label="职业病体检" :value="6"></el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="套餐图片">
               <img :src="'http://192.168.43.183/files/' + setmealUp.besSmImage" width="60px" height="45px">
              <input type="file" id="besSmImageUp"  accept=".gif,.jpg,.jpeg,.png,.webp"><span style="color:red;font-size:10px">不选择就是之前的图片</span>
            </el-form-item>
            <el-form-item label="套餐描述" prop="besSmDesc">
              <el-input type="textarea" v-model="setmealUp.besSmDesc" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="besSmItem">
              <el-input type="textarea" v-model="setmealUp.besSmItem" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="套餐状态" prop="besSmState">
              <div style="margin-top: 20px">
                <el-radio v-model="setmealUp.besSmState" :label="0" border size="medium">启用</el-radio>
                <el-radio v-model="setmealUp.besSmState" :label="1" border size="medium">禁用</el-radio>
              </div>
            </el-form-item>
          </el-form>
        </div></el-col>
      <el-col :span="12">
        <div>
          <el-table ref="singleTableUp" :data="upProjects" @selection-change="upProject" max-height="470" style="width: 100%">
            <el-table-column type="selection"  width="50"></el-table-column>
            <el-table-column prop="besProName" label="项目名称" width="330"></el-table-column>
            <el-table-column  prop="besProPrice" label="项目价格" width="90"></el-table-column>
            <el-table-column prop="besProGender" label="适用性别"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogUp=false">取 消</el-button>
      <el-button type="primary" @click="submitUp('setmealUp')">提交修改</el-button>
    </div>
  </el-dialog>

  <!-- 查看套餐详情的对话框 -->
  <el-dialog title="查看套餐详情" :visible.sync="dialogTableVisible" width="70%">
    <el-descriptions title="套餐信息" direction="vertical" :column="3" border>
       <template slot="extra">
        <el-button type="success" @click="dialogTableVisible=false">关闭详情</el-button>
      </template>
      <el-descriptions-item label="套餐编号">{{watchSetMeal.besSmId}}</el-descriptions-item>
      <el-descriptions-item label="套餐名称">{{watchSetMeal.besSmName}}</el-descriptions-item>
      <el-descriptions-item label="套餐总价格">{{watchSetMeal.besSmPrice}}</el-descriptions-item>
      <el-descriptions-item label="适用人群">{{watchSetMeal.besSmApply}}</el-descriptions-item>
      <el-descriptions-item label="适用年龄段">{{watchSetMeal.besSmAge}}</el-descriptions-item>
      <el-descriptions-item label="套餐状态">{{watchSetMeal.besSmState==0?'正常':'禁用中'}}</el-descriptions-item>
      <el-descriptions-item label="套餐图片" :span='3'><img :src="'http://192.168.43.183/files/' + watchSetMeal.besSmImage" width="70px" height="50px"></el-descriptions-item>
      <el-descriptions-item label="套餐描述" :span='3'>{{watchSetMeal.besSmDesc}}</el-descriptions-item>
      <el-descriptions-item label="注意事项" :span='3'>{{watchSetMeal.besSmItem}}</el-descriptions-item>
    </el-descriptions>
    <h1>套餐项目详情</h1>
    <el-table :data="watchSetMeal.list" max-height="530px">
      <el-table-column prop="besProName" label="项目名称" width="335"></el-table-column>
      <el-table-column  prop="besProPrice" label="项目价格"></el-table-column>
      <el-table-column prop="besProGender" label="适用性别"></el-table-column>
      <el-table-column prop="besProAge" label="适用年龄段"></el-table-column>
    </el-table>
  </el-dialog>
  </div>
</template>

<script>

export default({
  name: 'setMeal',
  data () {
    return {
      setmealadd: false,
      map: {
        index: '',
        findid: '',
        findname: '',
        findsm: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      // 添加对象
      setmeal: {
        besSmName: '',
        besSmPrice: '',
        besSmApply: '',
        besSmAge: '',
        besSmImage: '',
        besSmDesc: '',
        besSmItem: '',
        besTypeId: '',
        besSmState: '0'
      },
      pojects: [],
      maxage: 120,
      minage: 0,
      rules: {
        besSmName: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' }
        ],
        besTypeId: [
          { required: true, message: '请选择预约类型', trigger: 'change' }
        ],
        besSmDesc: [
          { required: true, message: '请输入套餐描述', trigger: 'blur' }
        ],
        besSmItem: [
          { required: true, message: '请输入注意事项', trigger: 'blur' }
        ],
        besSmApply: [
          { required: true, message: '请选择适用人群', trigger: 'blur' }
        ]
      },
      // 修改对象
      setmealUp: {
        besSmName: '',
        besSmPrice: '',
        besSmApply: '',
        besSmAge: '',
        besSmImage: '',
        besSmDesc: '',
        besSmItem: '',
        besTypeId: '',
        besSmState: '0'
      },
      // 修改对话框变量
      dialogUp: false,
      upProjects: [], // 修改的对话框表格变量
      watchSetMeal: {}, // 查看详情的方法
      dialogTableVisible: false // 打开套餐详情对话框的变量
    }
  },
  methods: {
    selsetmealall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      this.$axios.post('/api/setmeal/selsetmealall', this.map).then(result => {
        this.page = result.data
        this.showbesTypeId()
      })
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.selsetmealall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.selsetmealall()
    },
    showbesTypeId () {
      this.page.rows.forEach((e, i) => {
        switch (e.besTypeId) {
          case 1 :
            e.besTypeId = '入职体检'
            break
          case 2 :
            e.besTypeId = '健康体检'
            break
          case 3 :
            e.besTypeId = '从业体检'
            break
          case 4 :
            e.besTypeId = '征兵体检'
            break
          case 5 :
            e.besTypeId = '学生体检'
            break
          case 6 :
            e.besTypeId = '职业病体检'
            break
        }
        switch (e.besSmState) {
          case 0:
            e.besSmState = '启用'
            break
          case 1:
            e.besSmState = '禁用'
            break
        }
      })
    },
    // 查询所有启用项目的方法
    queryPojects () {
      this.$axios.post(`/api/setmeal/queryPojects`).then(({data}) => {
        this.pojects = data
      })
    },
    // 打开添加页面
    clickAdd () {
      this.setmealadd = true
      this.queryPojects()
    },
    // 选中的复选框
    addpoject (val) {
      this.setmeal.list = val
    },
    // 提交添加的方法
    submitSetMeal (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交改套餐吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: '正在添加，请勿关闭',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.5)'
            })
            var files = document.getElementById('besSmImage').files
            var params = new FormData()
            let price = 0
            let arr = []
            this.setmeal.list.forEach(e => {
              price += e.besProPrice
              arr.push(e.besProId)
            })
            // 打9折
            price = price * 0.9
            params.append('smImage', files[0])
            params.append('besSmName', this.setmeal.besSmName)
            params.append('besSmPrice', price)
            params.append('besSmApply', this.setmeal.besSmApply)
            params.append('besSmAge', this.minage + '-' + this.maxage)
            params.append('besSmDesc', this.setmeal.besSmDesc)
            params.append('besSmItem', this.setmeal.besSmItem)
            params.append('besTypeId', this.setmeal.besTypeId)
            params.append('besSmState', this.setmeal.besSmState)
            params.append('arr', arr)
            this.$axios({
              url: `/api/setmeal/submitSetMeal`,
              method: 'post',
              data: params,
              headers: { 'Content-Type': 'multipart/form-data' }
            }).then(result => {
              this.setmealadd = false
              this.selsetmealall()
              loading.close()
              this.$message({
                message: '添加套餐成功',
                type: 'success'
              })
              // 置空
              this.setmeal = {
                besSmName: '',
                besSmPrice: '',
                besSmApply: '',
                besSmAge: '',
                besSmImage: '',
                besSmDesc: '',
                besSmItem: '',
                besTypeId: '',
                besSmState: '0'
              }
              this.minage = 0
              this.maxage = 120
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            })
          })
        } else {
          return false
        }
      })
    },
    // 提交修改的方法
    submitUp (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交修改吗, 套餐的信息将发生改变，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: '正在修改，请勿关闭',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.5)'
            })
            var files = document.getElementById('besSmImageUp').files
            var params = new FormData()
            let price = 0
            let arr = []
            this.setmealUp.list.forEach(e => {
              price += e.besProPrice
              arr.push(e.besProId)
            })
            // 打9折
            price = price * 0.9
            params.append('besSmImageUp', files[0])
            params.append('besSmName', this.setmealUp.besSmName)
            params.append('besSmId', this.setmealUp.besSmId)
            params.append('besSmPrice', price)
            params.append('besSmApply', this.setmealUp.besSmApply)
            params.append('besSmAge', this.minage + '-' + this.maxage)
            params.append('besSmDesc', this.setmealUp.besSmDesc)
            params.append('besSmItem', this.setmealUp.besSmItem)
            params.append('besTypeId', this.setmealUp.besTypeId)
            params.append('besSmState', this.setmealUp.besSmState)
            params.append('arr', arr)
            this.$axios({
              url: `/api/setmeal/submitUp`,
              method: 'post',
              data: params,
              headers: { 'Content-Type': 'multipart/form-data' }
            }).then(result => {
              this.dialogUp = false
              this.selsetmealall()
              loading.close()
              this.$message({
                message: '修改套餐成功',
                type: 'success'
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            })
          })
        } else {
          return false
        }
      })
    },
    // 点击修改
    clickUp (row) {
      this.$axios.post(`/api/setmeal/queryPojects`).then(result => {
        this.upProjects = result.data
        this.$axios.post(`/api/setmeal/clickUp?besSmId=${row.besSmId}`).then(({data}) => {
          this.setmealUp = data
          this.minage = parseInt(this.setmealUp.besSmAge.substr(0, this.setmealUp.besSmAge.indexOf('-')))
          this.maxage = parseInt(this.setmealUp.besSmAge.substr(this.setmealUp.besSmAge.indexOf('-') + 1))
          this.dialogUp = true
          // console.log(data.list)
          this.$nextTick(() => {
            let arr = []
            result.data.forEach(e => {
              data.list.forEach(h => {
                if (h.besProId === e.besProId) {
                  arr.push(e)
                }
              })
            })
            arr.forEach(e => {
              this.$refs.singleTableUp.toggleRowSelection(e)
            })
          })
        })
      })
    },
    // 修改项目数组改变
    upProject (val) {
      this.setmealUp.list = val
    },
    // 点击删除
    delSetmeal (row) {

    },
    // 点击查看详情
    watchDetails (row) {
      this.$axios.post(`/api/setmeal/clickUp?besSmId=${row.besSmId}`).then(({data}) => {
        this.dialogTableVisible = true
        this.watchSetMeal = data
      })
    },
    // 生成PDF
    createPDF (row) {
      this.$confirm('确定生成该套餐的模板吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$prompt('请输入生成的文件名（文件将生成到桌面上，文件名最好不要跟桌面上的文件重名，否则将可能生成失败或覆盖该文件！）', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '请输入'
        }).then(({ value }) => {
          this.$axios.post(`/api/setmeal/createPDF?besSmId=${row.besSmId}&fileName=${value}`).then(result => {
            this.$message({
              type: 'success',
              message: '生成成功！请前往桌面查看'
            })
          }).catch(er => {
            this.$message({
              type: 'error',
              message: '生成失败！请稍后再试'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消生成'
        })
      })
    }
  },
  created () {
    this.selsetmealall()
  }
})
</script>

<style scoped>

</style>
